@import "_mixin.scss";
$Type_area:1210px;
$common :100%;
%iconfont {
    @include i(-110px, -60px, 7px, 4px);
    margin-top: 17px;
    margin-left: 13px;
    float: left;
}

%height100 {
    @include ygsc_header(35px);
}

.Type_area {
    @include ygsc_header(36px);
    @include ygsc_back(#f2f2f2);
    width: $common;
    .Type_area {
        @extend .Type_area;
        margin: auto;
        width: $Type_area;
    }
}

// 分类
%cur {
    cursor: pointer;
}

%float {
    float: left;
}

#search {
    height: 109px;
    .inner {
        @include display;
        justify-content: space-between;
        h1 {
            text-indent: -999px;
            cursor: pointer;
            background: url("https://pic5.cnrmall.com/image/2c/6c/2c6ce4ec89967ee42ef77fb0b524fc0c.png");
            width: 240px;
            height: 68px;
        }
        #gwc {
            width: 140px;
            $height: 32px;
            height: $height;
            line-height: $height;
            background-color: #f2f2f2;
            border: 1px solid #dfdfdf;
            color: red;
            cursor: pointer;
            p {
                margin-left: 20px;
                @extend %float;
            }
            i {
                @extend %float;
                @include i(0px,
                -30px,
                16px,
                16px);
                margin: 7px 19px;
            }
        }
        #Input_div {
            width: 470px;
            $height: 61px;
            height: $height;
            margin-top: 24px;
            section {
                height: 50%;
                border: 2px solid red;
                position: relative;
                input {
                    height: 84%;
                    width: 458px;
                    margin-left: 3px;
                    margin-top: 4px;
                    @include input_resert;
                }
            }
            button {
                width: 69px;
                height: 34.5px;
                background-color: red;
                @include input_resert;
                float: left;
                position: absolute;
                top: 72px;
                right: 420px;
                color: white;
                font-size: 16px;
                font-weight: bolder;
            }
            p {
                $p_height: 34%;
                height: $p_height;
                line-height: 20.74px;
                margin-top: 4px;
            }
        }
        #search_overhidden {
            width: 538px;
            height: 112px;
            border: 1px solid #D7D7D7;
            background-color: white;
            top: 72px;
            right: 406px;
            position: absolute;
            display: none;
        }
    }
}

#categories {
    @include common_wd;
    @include height(42px); // background-color: seagreen;
    border-bottom: 2px solid red; // .inner{
    //     background-color: blue;
    // }
    #categories_fenlei {
        width: 180px;
        $he: 42px;
        height: $he;
        background-color: red;
        @include display;
        justify-content: space-around;
        @extend %float;
        p {
            color: white;
            font-size: 14px;
            @extend %cur
        }
        i {
            @include i(-90px,
            -60px,
            9px,
            6px);
        }
    }
    #categorise_index {
        @include height(100%);
        @extend %float;
        p {
            width: 87px;
            $height: 36px;
            height: $height;
            @extend #categorise_index;
            $font-size: 14px;
            font-size: $font-size;
            text-align: center;
            line-height: $height;
            &:hover {
                color: red;
            }
            @extend %cur
        }
        p:first-child {
            font-weight: 600;
            color: red;
        }
    }
}

.inner {
    @include Type_area;
    height: 100%;
}

// 头部右边样式
.right {
    // width: 400px;
    // background-color: rgb(230, 224, 220);
    @extend %height100;
    float: right;
    p {
        @extend %float;
        padding: 8px 9px 7px 9px;
        margin: 0 3px 0 3px;
        span[name="login"]{
            color: red;
            margin-right: 5px;
        }
        span{
            &:hover{
                color: red;
            }
        }
    }
    i:not(.phone) {
        margin-top: 8px;
        @extend %iconfont;
        float: right;
    }
}

.diqu {
    $width: 100px;
    height: 100%;
    width: $width;
    float: left;
    line-height: 36px;
    p {
        float: left;
    }
    i:first-child {
        @include i(-41px,
        none,
        20px,
        20px);
        float: left;
        margin-top: 10px;
    }
    i[name="jiantou"] {
        @extend %iconfont;
    }
}
